/**
 * Created by bethinner on 5/16/16.
 */
//import React, { Component } from 'react';
var React = require("react");

var Component=React.Component;
import { connect } from 'react-redux'

import SpanInTagIcon from '../components/SpanInTagIcon'
import SoldOutIcon from '../components/SoldOutIcon'
import CountdownCounter from '../components/CountdownCounter'


export default class CardSimpleDescription extends Component {
    constructor(props) {
        super(props);


    }

    componentWillMount() {

    }

    getSoldOutIcon(){
        if (this.props.cardData.stock == 0){
            return (<SoldOutIcon/>)
        }else {
            return ""
        }
    }
    getCountdownCounter(){
        if (this.props.cardData.countdownTime > 0){
            return (<CountdownCounter  second={this.props.cardData.countdownTime} />)
        }else {
            return ""
        }


    }
    render() {
        let cardStatus = this.props.itemType;
        let withColor = (cardStatus == 1);
        switch (cardStatus) {
            case -2:
            case "-2":
            case -1:
            case "-1":
                let buttonColor = (this.props.cardData.stock == 0 ? "#CEC9C9" : "#F89108");
                return (
                    <div style={divStyle}>
                        {this.getSoldOutIcon()}
                        {this.getCountdownCounter()}
                        <div style={
                {height: "40%",
                lineHeight:"60px",
                color:buttonColor,
                fontSize:"24px",
                zIndex:2}}>
                            ¥{this.props.cardData.purchase_price}
                        </div >
                        <div style={{height: "20%",
                lineHeight:"20px",
                fontSize:"10px"}}> 剩余{this.props.cardData.stock}张
                        </div>
                        <div style={{height: "40%",lineHeight:"30px"}}>
                            <button className="ant-btn" style={{backgroundColor:buttonColor,borderColor:buttonColor,color:"white"}}>
                            抢</button>
                        </div>
                    </div>

                );
                break;
            case 0:
            case "0":
            case 1:
            case "1":
            case 2:
            case "2":
            case 3:
            case "3":

                return ( <div
                    style={divStyle}>
                    <div style={{height: "40%",
                lineHeight:"20px",
                fontSize:"12px",
                margin:"0 auto",padding:"3px",paddingTop:"15%"}}>{this.props.cardData.card_name}
                    </div>
                    <SpanInTagIcon
                        bottom={"-20px"}
                        text={statsText[this.props.itemType]}
                        withColor={withColor}
                    />
                </div>);
                break;
            default:
                return (<div></div>);
                break

        }

    }
}

let divStyle = {
    height: 100,  textAlign: 'center',
    borderRadius: "6px",
    backgroundColor: "white",
    position: "relative"
};
let statsText = ["待付款", "未使用", "已使用", "已过期"];

CardSimpleDescription.defaultProps = {
    cardData: {
        cardName: "",
        businessName: "",
        picUrl: "",
        price: "",
        stock: "",//库存
        status: -1//状态
    },
    itemType: 0
};

CardSimpleDescription.propTypes = {
    cardData: React.PropTypes.object,
    itemType: React.PropTypes.number
};


